<script setup lang="ts">
import {createFromIconfontCN} from "@ant-design/icons-vue";
import {iconFontAddress} from "@/util/commonUtil";
import {ref, watch} from "vue";

const props = defineProps({
  shareShow: {
    type: String,
    default: false
  }
});
const shareQR = window.location.href
// 引入阿里图标库
const IconFont = createFromIconfontCN({
  scriptUrl: iconFontAddress,
});

const open = ref<boolean>(false)

watch(()=>props.shareShow,()=>{
  open.value = true
})
</script>

<template>
  <a-modal v-model:open="open">
    <template #title>
      <div class="loginTitle">
          <span class="w-full text-2xl flex justify-center items-center">
            <span>本站分享</span>
          </span>
      </div>
    </template>
    <div class="flex flex-col w-full justify-center items-center">
      <a-qrcode :value="shareQR" type="'svg'"/>
    </div>
    <a-divider>
      <span class="text-gray-300 text-[12px]">更多分享方式</span>
    </a-divider>
    <template #footer>
      <div class="flex justify-center items-center gap-4">
          <span class="shareBottom w-[2.5rem] h-[2.5rem] flex justify-center items-center cursor-pointer">
            <IconFont type="icon-douban" class="text-xl"/>
          </span>
        <span class="shareBottom w-[2.5rem] h-[2.5rem] flex justify-center items-center cursor-pointer">
            <IconFont type="icon-weibo1" class="text-xl"/>
          </span>
        <span class="shareBottom w-[2.5rem] h-[2.5rem] flex justify-center items-center cursor-pointer">
            <IconFont type="icon-QQkongjian" class="text-xl"/>
          </span>
        <span class="shareBottom w-[2.5rem] h-[2.5rem] flex justify-center items-center cursor-pointer">
            <IconFont type="icon-douyinzhanghao" class="text-xl"/>
          </span>
        <span class="shareBottom w-[2.5rem] h-[2.5rem] flex justify-center items-center cursor-pointer">
            <IconFont type="icon-xiaohongshu" class="text-xl"/>
          </span>
      </div>
    </template>
  </a-modal>
</template>

<style scoped lang="less">

</style>
